* {
  margin: 0;
  padding: 0;
}
.box {
  overflow: hidden;
  width: 100%;
  background: url(chessboard.jpg);
}
label {
  width: 100%;
  float: left;
  position: relative;
}
label::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  background: #000;
  width: 100%;
  height: 1px;
  -webkit-transform: translateY(-15px) scaleY(0.5);
  transform: translateY(-15px) scaleY(0.5);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}
input[type='checkbox'] {
  box-sizing: border-box;
  width: 6.66%;
  height: 30px;
  line-height: 30px;
  outline: none;
  margin: 0;
  padding: 0;
  /*清除单选框默认样式*/
  -webkit-appearance: none;
  float: left;
  border-left: none;
  text-align: center;
  position: relative;
}
input[type='checkbox']::after {
  font-size: 20px;
}
input[type='checkbox']::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  background: #000;
  width: 1px;
  height: 100%;
  -webkit-transform: translateX(-50%) scaleX(0.5);
  transform: translateX(-50%) scaleX(0.5);
}
input[type='checkbox']:checked::after {
  /*选中为黑*/
  content: '●';
}
#announcement {
  text-align: center;
  padding-top: 20px;
  float: left;
  width: 100%;
  background-color: white;
}
input:checked + input:checked + input:checked + input:checked + input:checked ~ #announcement::before {
  content: '胜利';
}
input:checked + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + input:checked + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + input:checked + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + input:checked + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + input:checked ~ #announcement::before {
  content: '胜利';
}
input:checked + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + input:checked + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + input:checked + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + input:checked + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + input:checked ~ #announcement::before {
  content: '胜利';
}
input:checked + * + * + * + * + * + * + * + * + * + * + * + * + * + * + input:checked + * + * + * + * + * + * + * + * + * + * + * + * + * + * + input:checked + * + * + * + * + * + * + * + * + * + * + * + * + * + * + input:checked + * + * + * + * + * + * + * + * + * + * + * + * + * + * + input:checked ~ #announcement::before {
  content: '胜利';
}
